<template>
    <div id="webpage">
        <page-top :data="pageTopData"/>
        <div class="webpage-articles-main">
                <section class="webpage-articles">
                    <client-only>
                        <nuxt-child/>
                    </client-only>
                </section>
                <aside class="webpage-asides">
                    <rank :data="clickRankData" class="webpage-asides-item"/>
                    <rank :data="releaseRankData" class="webpage-asides-item"/>
                    <rank :data="typeRankData" class="webpage-asides-item"/>
                </aside>
        </div>
    </div>
</template>

<script>
	export default {
		name: "webpage",
        components:{
		    PageTop:()=>import('../components/pagecomponents/PageTop'),
            Rank:()=>import('../components/Rank')
        },
        async asyncData({app,route,redirect,params}){
	        //页面头部面包屑导航
			let pageTopData = {
				tag1:'文章汇总',
				href1:'/webpage',
				tag2:'',
				href2:''
            };
	        let result = await app.$getWebTypes();
	        let types = result.data;
	        if(params.articleid){//有值说明是文章页面，需要修改页面面包屑导航栏
		        pageTopData = {
			        tag1:'文章汇总',
			        href1:'/webpage',
			        tag2:'正文',
			        href2:route.path
		        };
	        }else if(params.tagid){//有值说明是tag分页，需要修改页面面包屑导航栏
		        pageTopData = {
			        tag1:'文章汇总',
			        href1:'/webpage',
			        tag2:'tags标签',
			        href2:route.path
		        };
            }else if(params.typeid){//有值说明是分类页面，需要修改页面面包屑导航栏
	        	let name = types.find(item=>{
	        		return item.id === params.typeid;
                }).name;
		        pageTopData = {
			        tag1:'文章汇总',
			        href1:'/webpage',
			        tag2:name,
			        href2:route.path
		        };
            }
	        let mostviews = await app.$getWebPageByViews({num:10});
	        let latest = await app.$getWebPageByTime({num:10});
	        return {
		        pageTopData,
		        typeRankData:{
		        	baseUrl:'/webpage/types',
			        title:'文章分类',
			        showTag:false,
			        dataList:types
                },
		        clickRankData:{//传递给rank组件的值
			        baseUrl:'/webpage/articles',
			        title:'点击排行',
			        showTag:true,
			        dataList:mostviews.data
		        },
		        releaseRankData:{
			        baseUrl:'/webpage/articles',
			        title:'最新发布',
			        showTag:true,
			        dataList:latest.data
		        }
            }
        },
        data(){
			return{
                viewHeight:0,//浏览器高度
				containerDom:null,//中间容器
                containerToTop:0,//中间容器距离页面顶部的距离
                articlesDom:null,//文章列表容器
                articlesDomHeight:0,//文章列表容器高度
				articlesDomWidth:0,//文章列表容器宽度
				sideBarDom:null,//侧边栏
                sideBarHeight:0,//侧边栏高度
            }
        },
        mounted(){
            this.containerDom = document.querySelector('.webpage-articles-main');
            this.sideBarDom = document.querySelector('.webpage-asides');
            this.articlesDom = document.querySelector('.webpage-articles');
            window.onload = this.getNewDomRect;
            window.addEventListener('resize',()=>{
	            this.getNewDomRect();
	            this.resetAsideRect();
            });
            window.addEventListener('scroll',()=>{
	            this.resetAsideRect();
            });//鼠标滚动时判断侧边栏位置
            setTimeout(()=>{
            	this.getNewDomRect();
            	this.resetAsideRect();
            },10);
        },
        methods:{
            getNewDomRect(){//加载和页面大小发生变化时获取目标标签的几何位置
                //获取最新浏览器高度
                console.log('执行');
                this.viewHeight = window.innerHeight;
                //获取最新的容器距离页面顶部的距离
                let baseTop = 50;//默认页面宽度大于1000px，margin-top值为70px
            	if(window.innerWidth > 750){
            		baseTop = 120;
                }else{
            		baseTop = 50;
                }
	            this.containerToTop = this.containerDom.offsetTop + baseTop;
            	//获取最新的侧边栏高度
                this.sideBarHeight = this.sideBarDom.clientHeight;
                //获取最新文章列表高度
                this.articlesDomHeight = this.articlesDom.clientHeight;
                this.articlesDomWidth = this.articlesDom.clientWidth;

                //修改侧边栏位置
                if(window.innerWidth > 750){
	                this.sideBarDom.style.marginLeft = `${this.articlesDomWidth + 20}px`;
                }else{
	                this.sideBarDom.style.marginLeft = '0';
                }
            },
            resetAsideRect(){
	            if(window.innerWidth > 750){ //当页面宽度大于750px时才使用侧边栏定位
		            let y1 = this.sideBarHeight + this.containerToTop - this.viewHeight ;
		            let y2 = this.articlesDomHeight + this.containerToTop - this.viewHeight ;
		            if(window.pageYOffset > y2){
			            this.sideBarDom.classList.remove('fixed');
			            this.sideBarDom.classList.add('abs');
		            }else if(window.pageYOffset > y1){
			            this.sideBarDom.classList.add('fixed');
			            this.sideBarDom.classList.remove('abs');
			            this.sideBarDom.style.marginTop = `${-y1 + 20}px`;
			            this.sideBarDom.style.marginLeft = `${this.articlesDomWidth + 20}px`;
		            }else{
			            this.sideBarDom.classList.remove('abs');
			            this.sideBarDom.classList.remove('fixed');
			            this.sideBarDom.style.marginTop = '0';
		            }
	            }else{
		            this.sideBarDom.classList.remove('abs');
		            this.sideBarDom.classList.remove('fixed');
		            this.sideBarDom.style.marginTop = '0';
		            this.sideBarDom.style.marginLeft = '0';
                }
            }
        },
		head(){
			return {
				title:'个人博客-前端技术-胡兴龙',
				meta:[
					{hid:'description',name:'description',content:"前端文章专栏,包含学习过程中遇到的各种困难及解决方式,巩固提高前端技术,补充各种琐碎的前端知识,分享前端学习经验"},
					{hid:'keywords',name:'keywords',content:'前端技术,js技术,学习交流,前端框架,前端应用'}
				]
			}
		},
	}
</script>

<style scoped>
    .webpage-articles-main{
        position: relative;
        margin-bottom: 20px;
    }
    .webpage-articles-main::after{
        content: "";
        display: block;
        clear: both;
    }
    .webpage-asides{
        margin-top: 0;
    }
    .webpage-asides-item:nth-of-type(1), .webpage-asides-item:nth-of-type(2){
        margin-bottom: 20px;
    }
    @media screen and (min-width: 1000px){
        #webpage{
            margin: 0 auto;
            margin-top: 70px;
            width: 1000px;
        }
        .webpage-articles{
            float: left;
            width: 700px;
        }
        .webpage-asides{
            width: 280px;
            margin-left: 720px;
        }
        .abs{
            position: absolute;
            bottom:0;
        }
        .fixed{
            position: fixed;
        }
    }
    @media screen and (min-width: 750px) and (max-width: 1000px){
        #webpage{
            margin: 0 auto;
            margin-top: 70px;
            width: 95%;
        }
        .webpage-articles{
            float: left;
            width: calc(100% - 220px);
        }
        .webpage-asides{
            width: 200px;
            margin-left: calc(100% - 200px);
        }
        .abs{
            position: absolute;
            bottom:0;
        }
        .fixed{
            position: fixed;
        }
    }
    @media screen and (max-width: 750px){
        #webpage{
            margin-top: 50px;
            padding: 5px;
        }
        .webpage-asides{
            margin: 0;
        }
    }
</style>